<script setup lang="ts">
import type { NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'

import {
  Edit,
} from '@element-plus/icons-vue'
import { onMounted } from 'vue';
// const { updateNodeData } = useVueFlow()

const props = defineProps(['label', 'data', 'id'])
// function onSelect(color) {
//   updateNodeData(props.id, { color, isGradient: false })
// }
onMounted(() => {
  // console.log(props.data);
})
</script>

<template>
  <Handle type="target" :position="Position.Left" />
  <div class="content shadow-xl">
    <div class="top text-lg">{{ label }}</div>
    <div class="bottom ">
      <div class="detail  truncate">{{ data.content }}</div>
      <div class="btn"></div>
    </div>
  </div>
  <Handle type="source" :position="Position.Right" />
</template>

<style scoped>
.content {
  /* display: flex; */
  flex-direction: column;
  height: 60px;
  width: 150px;
  border-radius: 5px;
  position: relative;
  background-color: rgb(237, 234, 234);

  .top {
    width: 90%;
    position: absolute;
    text-align: center;
    height: 25px;
    color: white;
    left: 50%;
    transform: translate(-50%, 0%);
    top:-10px;
    /* background-color: #f3f6f9; */
    /* background-image:linear-gradient(0deg,#16d9e3 0%, #30c7ec 47%, #46aef7 100%); */
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 5px;
  }

  .bottom {
    width: 100%;
    position: absolute;
    top: 15px;
    border-radius: 5px;
    height: 48px;
    flex: 1;
    display: flex;
    align-items: center;
    .detail {
      margin-top: 10px;
      margin-left: 5px;
      height: 100%;
      line-height: 35px;
    }

    .btn {
      margin-left: 4px;
      /* margin: 4px; */
    }
  }
  &:hover{
      border: 2px solid #1e90ff;
    }
}
</style>